<template>

  <section class="registered">
    <AddressHeader :title="title"></AddressHeader>
		<div class="Register_Test">
			<!-- <input type="text" placeholder="验证码" /> -->
      <div id="v_container" style="width: 80px;height: 30px;"></div>
      <input type="text" id="code_input" v-model="vcode" placeholder="请输入验证码"/>
      <!-- <input type="tel" class="phone-num" placeholder="请输入手机号" /> -->
      <div class="phone-content" v-on:click.stop="fillContent">
        <input v-model="cellphone"  v-on:keyup="sendSmsCode()" id="pcode" class="phone-num" type="tel" placeholder="请输入手机号码">
        <input class="verify-btn" type="button" v-model="btnContent" id="dis" :disabled="disabled" @click="dis()">
        <!-- <button class="verify-btn">获取短信验证码</button> -->
			</div>
      <input type="text" class="verify-num" placeholder="请输入短信验证码" />
      <div class="toggle-button-wrapper">
          <input type="checkbox" id="toggle-button" name="switch">
          <label for="toggle-button" class="button-label">
              <span class="circle"></span>
              <!-- <span class="text on">ON</span>
              <span class="text off">OFF</span> -->
          </label>
      </div>
			<input type="password" v-model="password" v-on:keyup="isPasswd()" class="pwd" value="s" placeholder="密码" />
			<br />
			<button class="haha"  id="my_button" @click="btn()">
				<!-- <router-link to="/Mine" class="router-link"> -->
					注册
				<!-- </router-link> -->
			</button>
		</div>
  </section>

</template>

<script>
import {reg} from '../api/api';
import { Toast } from "mint-ui";
import "../js/gVerify.js";
import AddressHeader from "./Address_header.vue";
export default {
  name: "registered",
  props: [],
  data() {
    return {
      arr: [],
      title: "注册",
      phoneNum: "", //手机号
      // verifyNum: "", //验证码
      btnContent: "获取短信验证码", //获取验证码按钮内文字
      // time: 0, //发送验证码间隔时间
      disabled: true, //按钮状态
      verifyCode: "",
      code_input: "",
      pass: "",
      bNext: false,
      bSendCode: false,


      vcode: "",
      password: "",
      cellphone: ""
    };
  },

  // 接口
  // created() {
  //   var url = "http://vueshop.glbuys.com/api/home/user/reg?token=1ec949a15fb709370f"
  //   axios.get(url).then((res) => {
  //     console.log(res.data)
  //     this.arr = res.data
  //   })
  // },
  mounted() {
    this.verifyCode = new GVerify("v_container");
    // this.oTel = $("#tel");
    // this.oPcode = $("#pcode");
    // this.oBtny = $("#my_button");
  },
  components: {
    AddressHeader: AddressHeader
  },
  methods: {
    // 注册接口
    reg(){
      // reg();
      // const param = {
      //   vcode: this.vcode,
      //   cellphone: this.cellphone,
      //   password: this.password
      // }
      // const param = {
      //   vcode: 8888,
      //   cellphone: 18201020600,
      //   password: '123456'
      // }

      var params = new URLSearchParams();
      params.append('vcode', this.vcode); //你要传给后台的参数值 key/value
      params.append('cellphone', this.cellphone);
      params.append('password', this.password);
      reg(params).then(res=>{
        // console.log(res);
        const data = res.data;
        if(data.code === 200){
          alert('注册成功');
          this.$router.push({ path: 'Login' });
        }else{
          alert(data.data);
        }
      })

    },


    // verifyPhone() {
    //   this.verifyShow = !this.verifyShow;
    // },
    sendSmsCode() {
      console.log(11);
      var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/; //手机号正则验证
      var phoneNum = this.phoneNum;
      if (!phoneNum) {
        //未输入手机号
        Toast("请输入手机号码");
        this.disabled = true;
        return;
      } else if (!reg.test(phoneNum)) {
        //手机号不合法
        Toast("您输入的手机号码不合法，请重新输入");
        this.disabled = true;
      }
      if (reg.test(this.phoneNum)) {
        this.disabled = false;
      }
    },
    isPasswd() {
      var patrn = /^(\w){6,20}$/;
      if (!patrn.exec(this.pass)) return false;
      return true;
    },
    btn() {


      //验证码
      // var res = this.verifyCode.validate(this.code_input);
      // if (res) {
      //   alert("验证正确");
      // } else {
      //   alert("验证码错误");
      // }

      //手机号
      var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/; //手机号正则验证
      var phoneNum = this.cellphone;
      if (!phoneNum) {
        //未输入手机号
        alert("请输入手机号码");
        this.disabled = true;
        return;
      } else if (!reg.test(phoneNum)) {
        //手机号不合法
        alert("您输入的手机号码不合法，请重新输入");
        this.disabled = true;
        return;
      }
      
      // 密码
      console.log(1);
      var patrn = /^(\w){6,20}$/;
      if (!patrn.exec(this.password)) {
        alert("请输入密码");
        return false;
      }

      this.reg();
      
    },
    fillContent() {
      // console.log("fillContent");
    },
    dis() {
      this.phoneNum;
      console.log(this.phoneNum)
      if (this.bNext) {
        this.yzm(() => {
          if (this.bNext) {
            if (this.bSendCode == false) {
              var vdcode = parseInt(Math.random() * (9999 - 1000 + 1) + 1000);
              alert(vdcode);
              //            var url="http://test.aicailang.com:8090/sendSMS?mobile="+this.oTel.val()+"&captcha="+vdcode;
              //            this.myAjax(url,"get",function(ret){
              //              console.log(ret);
              localStorage["phoneCode"] = vdcode;
              this.sendCode();
              //});
            }
          }
        });
      }
    },
    sendCode(){
        var wait = 60;
        var _this = this;
        var timer;
          if(this.bSendCode==false) {
            this.bSendCode = true;
            timer=setInterval(() => {
              wait--;
              _this.oBtny.text("重新发送(" + wait + ")");
              if(wait==0){
                clearInterval(timer);
                this.bSendCode = false;
                localStorage.removeItem('phoneCode');
                _this.oBtny.text("获取验证码");
              }
            }, 1000);
        }
    }
  },
  computed: {}
};
</script>

<style scoped>
.registered {
  width: 100%;
  overflow: hidden;
}

.Register_Test {
  width: 100%;
}
#v_container {
  position: fixed;
  left: 5.65rem;
  margin-top: 0.47rem;
}
#code_input {
  width: 6.5rem;
  height: 0.71rem;
  margin-left: 0.27rem;
  padding: 0 0.2rem;
  font-size: 0.24rem;
  margin-top: 0.38rem;
  border: 0.01rem solid #f2f2f2;
  /* background: url(../assets/main_img/chkcode.gif) no-repeat 5.7rem; */
}

.phone-num {
  width: 4rem;
  height: 0.71rem;
  margin-left: 0.4rem;
  padding: 0 0.2rem;
  font-size: 0.24rem;
  margin-top: 0.31rem;
  border: 0.01rem solid #f2f2f2;
}

.verify-num {
  width: 6.5rem;
  height: 0.71rem;
  margin-left: 0.27rem;
  padding: 0 0.2rem;
  font-size: 0.24rem;
  margin-top: 0.3rem;
  border: 0.01rem solid #f2f2f2;
}

.pwd {
  width: 6.5rem;
  height: 0.71rem;
  margin-left: 0.27rem;
  padding: 0 0.2rem;
  font-size: 0.24rem;
  margin-top: -1rem;
  border: 0.01rem solid #f2f2f2;
}

.verify-btn:disabled {
  background: #eaeaea;
}
.verify-btn {
  width: 2.1rem;
  height: 0.75rem;
  color: #717376;
  /* background: #eaeaea; */
  border: none;
  font-size: 0.24rem;
  margin-left: 0.12rem;
  background: red;
  border-radius: 0.06rem;
}

.haha {
  width: 6.75rem;
  height: 0.8rem;
  border-radius: 0.06rem;
  border: none;
  background: #eb1625;
  color: #fff;
  font-size: 0.38rem;
  margin: 0.35rem 0.38rem;
}
.router-link {
  color: white;
}

.toggle-button-wrapper {
  position: relative;
  left: 5.66rem;
  top: 0.5rem;
}
#toggle-button {
  display: none;
}
.button-label {
  position: relative;
  display: inline-block;
  width: 1rem;
  height: 0.55rem;
  background-color: #ccc;
  box-shadow: #ccc 0px 0px 0px 0.04rem;
  border-radius: 0.3rem;
  overflow: hidden;
}
.circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background-color: #fff;
}
.button-label .text {
  line-height: 0.55rem;
  font-size: 0.15rem;
  text-shadow: 0 0 0.02rem #ddd;
}

/* .on {
  color: #fff;
  display: none;
  text-indent: 0.2rem;
}
.off {
  color: #fff;
  display: inline-block;
  text-indent: 0.7rem;
} */
.button-label .circle {
  left: 0;
  transition: all 0.3s;
}
#toggle-button:checked + label.button-label .circle {
  left: 0.44rem;
}
#toggle-button:checked + label.button-label .on {
  display: inline-block;
}
#toggle-button:checked + label.button-label .off {
  display: none;
}
#toggle-button:checked + label.button-label {
  background-color: #fc9154;
}

</style>
